<template>
  <div class="editor_container">
    <quill-editor ref="myTextEditor" :content="content" :options="editorOption" style="height: 200px" @change="onEditorChange($event)" />
    <span class="text_length">{{ textLength }}字</span>
    <!-- 展示 -->
    <div class="ql-editor" v-html="str">
      {{ str }}
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'TextEditor',
  components: { quillEditor },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      str: '',
      textLength: 0,
      editorOption: {
        placeholder: '请输入文章内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image', 'video'] // 上传图片、上传视频
            // [{ script: "sub" }, { script: "super" }], // 上下标
            // [{ size: ["small", false, "large", "huge"] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
            // [{ font: [] }], //字体
          ]
        }
      }
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
  },
  methods: {
    onEditorChange(event) {
      this.textLength = event.text.length - 1
      this.$emit('onEditorChange', event.html)
    }
    // 转码
    // escapeStringHTML(str) {
    //   str = str.replace(/&lt;/g, "<");
    //   str = str.replace(/&gt;/g, ">");
    //   return str;
    // },
  }
}
</script>

<style lang="scss" scoped>
.editor_container {
  height: 270px;
  position: relative;

  .text_length {
    position: absolute;
    right: 20px;
    bottom: 15px;
    font-size: 14px;
    color: #999;
  }
}
</style>
